<script setup>
import { reactive, ref } from 'vue';
import { getAuth, submissionsGift } from "@/api/index.js";
import { Loading, showToast } from 'vant';
import { showSuccessToast, showFailToast } from 'vant';
import { onMounted } from 'vue'
import { useRoute } from 'vue-router';
import bgimg from '@/assets/img/bg.jpg';
import p1 from '@/assets/img/p1.jpg';
import p2 from '@/assets/img/p2.jpg';
import p3 from '@/assets/img/p3.jpg';
// import TheWelcome from '../components/TheWelcome.vue'
const money = ref('');
const studentId = ref('');
const route = useRoute();
const rewards = reactive([
    { url: p1, name: '鼠标垫', id: 1 },
    { url: p2, name: '帆布包', id: 2 },
    { url: p3, name: '徽章', id: 3 },
])
const checked = ref('鼠标垫');
const show = ref(false);
const userCode = ref(null);
const tenantCode = ref(null);
const loading = ref(false)
const isSubmit = ref(false)
// Login();
const getAuthRes = () => {
    loading.value = true;
    getAuth({
        "encryptionType": "sha1",
        "tenantCode": tenantCode.value,
        "userCode": userCode.value,
        "userType": "weChat"
    }).then(
        rs => {
            if (rs.code == 200 && rs.data) {
                studentId.value = rs.data.number;
            }
        }
    )
}
const onSubmit = () => {
    submissionsGift(
        {
            "giftName": checked.value,
            "studentId": studentId.value,
            "submissionTime": new Date(),
            "giftType": 0,
            "id": 0,
            "status": 0,
        }
    ).then(
        rs => {
            if (rs.code == 200 && rs.data) {
                show.value = false;
                isSubmit.value = true;
                showSuccessToast('提交成功！');
            }else{
                showFailToast('提交失败，请重试！');
            }
        }
    ).catch(
        err=>{
            showFailToast('提交失败，请重试！');
        }
    )
}
onMounted(() => {
    if (route.query) {
        userCode.value = route.query.userCode;
        tenantCode.value = route.query.tenantCode;
    }
    if (userCode.value && tenantCode.value) {
        getAuthRes();
    }
})
</script>

<template>
    <div class="relative w-screen">
        <img class="w-screen object-cotain" :src="bgimg" />
        <div @click="show = true" style="background-color: #46E247;margin-top:-1.5rem ;color: black;"
            class="px-4 text-2xl font-black ml-3 relative w-max h-12 flex items-center rounded-lg">
           点击领取
        </div>
        <div class="px-6 text-xl font-semibold mt-4" style="color: black;">
            <div v-if="!isSubmit">2024级新生（仅限狮子山、成龙校区）可免费领取川师文创用品（帆布包、鼠标垫、徽章），数量有限，领完为止。</div>
            <div v-if="!isSubmit" class="mt-2">领取地址：川师微生活迎新服务点</div>
            <p v-if="isSubmit">同学你好，你已成功登记，请注意接听工作人员服务电话，报到时请至微生活迎新服务点领取。</p>
        </div>
    </div>
    <van-dialog v-model:show="show" title="礼品领取登记" show-cancel-button :show-confirm-button="false">
        <van-form @submit="onSubmit" label-width="4rem">
            <van-cell-group inset>
                <van-field type="digit" v-model="studentId" name="学号" label="填写学号" placeholder="请输入"
                    :rules="[{ required: true, message: '请填写学号' }]" />
                <van-field name="radio" label="选择礼品">
                    <template #input>
                        <van-radio-group v-model="checked" direction="vertical">
                            <van-radio class="mb-2" v-for="(item, index) in rewards" :key="index" :name="item.name">
                                <div class="flex items-center">
                                    <span class="w-14">{{ item.name }}</span>
                                    <img :src="item.url"
                                        class="w-24 h-24 object-cotain ml-2" />

                                </div>
                            </van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
        <!-- <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" /> -->
    </van-dialog>
</template>
<style lang="css">
body {
    background-color: #D3F94F !important;
}
</style>
